<template>
	<view class="index-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="三联一进"></uni-navbar></view>

		<view class="banner">
			<view class="h2-ttl">{{ detailInfo.name }}</view>
			<map class="map" id="map" :longitude="longitude2" :latitude="latitude2" :markers="marker" scale="16" @click="mapTo"></map>
		</view>

		<!-- <view class="banner"><image class="image" :src="$imagePathLogo(detailInfo.logo, 'default@2x.png')" mode="aspectFill"></image></view> -->

		<view class="form-box form-box-show">
			<u-form ref="uForm">
				<u-form-item class="form-item" label="网格地址">{{ detailInfo.areaAddr }}</u-form-item>
				<u-form-item class="form-item" label="网格简介" labelPosition="top">
					<view class="input-text">{{ detailInfo.detailInfo }}</view>
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm" v-if="detailInfo.id">
			<u-button class="sign" hover-class="none" shape="circle" v-if="!isClock" @click="addSign(1, '签到成功')">
				<u-icon class="icon" name="calendar" size="36" color="#D0021B"></u-icon>
				签到
			</u-button>
			<u-button class="sign" hover-class="none" shape="circle" v-else @click="addSign(2, '签退成功')">
				<u-icon class="icon" name="calendar" size="36" color="#D0021B"></u-icon>
				签退
			</u-button>
			<u-button class="form-btn" shape="circle" type="error" @click="navTo('/pagesA/lxWg/list')">活动情况</u-button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			id: '',
			detailInfo: {},
			areaLal: '',
			latitude: '',
			longitude: '',
			is: false,
			isClock: false,
			r: 1000,
			latitude2: '',
			longitude2: '',
			marker: [
				{
					id: 0,
					latitude: '',
					longitude: '',
					iconPath: '/static/img/icon_map.png',
					rotate: 0,
					width: 24,
					height: 24
				}
			],
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		this.loadData();
		this.loadDict('r', 'r');
	},
	onShow() {
		this.getLocation();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		loadData() {
			this.$request('/minqingzhitong/msManageDept/query', {
				id: this.id
			}).then((res) => {
				this.detailInfo = res.data;
				this.areaLal = res.data.areaLal;

				let lng = parseFloat(this.detailInfo.areaLal.split(',')[0]);
				let lat = parseFloat(this.detailInfo.areaLal.split(',')[1]);
				let data = this.$bd09_to_gcj02(lng, lat);

				this.longitude2 = data.lng; // 经度
				this.latitude2 = data.lat; // 纬度
				this.marker[0].longitude = data.lng; // 经度
				this.marker[0].latitude = data.lat; // 纬度

				this.getClock();
			});
		},
		loadDict(type, key) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[key] = parseInt(res.data[0].dictValue);
			});
		},
		getLocation() {
			try {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let data = this.$gcj02_to_bd09(res.longitude, res.latitude);
						this.longitude = data.lng;
						this.latitude = data.lat;
					}
				});
			} catch (e) {
				this.$msg('请检查位置信息');
			}
		},
		addSign(e, msg) {
			if (!this.detailInfo.areaLal) {
				this.$msg('请检查网格坐标');
				return false;
			}
			let lng = parseFloat(this.detailInfo.areaLal.split(',')[0]);
			let lat = parseFloat(this.detailInfo.areaLal.split(',')[1]);
			this.is = this.$pointInsideCircle(this.longitude, this.latitude, lng, lat, this.r);

			if (!this.is) {
				this.$msg('不在打卡范围内');
				return false;
			}
			this.$request('/minqingzhitong/msManageDept/clockIn', {
				userId: this.userId,
				msDeptId: this.detailInfo.id,
				type: e
			}).then((res) => {
				this.$msg(msg);
				this.getClock();
			});
		},
		getClock() {
			this.$request('/minqingzhitong/msManageDept/getIsClock', {
				userId: this.userId,
				msDeptId: this.detailInfo.id
			}).then((res) => {
				this.isClock = res.data.inFlag;
			});
		},
		mapTo(e) {
			uni.openLocation({
				name: this.detailInfo.name,
				address: this.detailInfo.areaAddr,
				latitude: this.latitude2,
				longitude: this.longitude2,
				success: () => {
					console.log('success');
				}
			});
			return false;
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.index-view {
	padding-bottom: 120rpx;
	background-color: #fff;
}

.banner {
	position: relative;
	padding: 0;
	min-height: 586rpx;
	z-index: 10;

	.image {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
	}

	.map {
		width: 100%;
		height: 586rpx;
	}
}

.h2-ttl {
	position: absolute;
	left: 20rpx;
	right: 20rpx;
	top: 10rpx;
	padding: 32rpx;
	font-size: 18px;
	color: #333;
	line-height: 50rpx;
	text-align: center;
	background: #fff;
	z-index: 100;
	box-shadow: 0 2rpx 10rpx 0 rgba(185, 185, 185, 0.5);
	border-radius: 10rpx;
}

.form-box {
	.form-item {
		@include mp-flex;
	}

	.input-text {
		width: 100%;
		text-align: left;
	}
}

.fiexd-btm {
	display: flex;
	align-items: center;

	.sign {
		margin-right: 20rpx;

		.icon {
			margin-right: 10rpx;
		}

		:deep(.u-btn--default) {
		}
	}

	.form-btn {
		flex-grow: 1;
	}
}
</style>
